<template>
  <div class="admin-users">
    <div class="dashboard-header">
      <h2>用户管理</h2>
      <div class="header-actions">
        <el-input
          v-model="searchQuery"
          placeholder="搜索用户"
          class="search-input"
          size="large"
        >
          <template #append>
            <el-button type="primary" icon="Search">搜索</el-button>
          </template>
        </el-input>
        <el-button type="primary" icon="Plus">添加用户</el-button>
      </div>
    </div>
    
    <el-table :data="users" style="width: 100%" stripe>
      <el-table-column prop="id" label="ID" width="80" />
      <el-table-column prop="name" label="姓名" width="120" />
      <el-table-column prop="role" label="角色" width="120">
        <template #default="scope">
          <el-tag :type="getRoleTagType(scope.row.role)">
            {{ scope.row.role }}
          </el-tag>
        </template>
      </el-table-column>
      <el-table-column prop="phone" label="手机号" width="150" />
      <el-table-column prop="hospital" label="所属医院" />
      <el-table-column prop="status" label="状态" width="100">
        <template #default="scope">
          <el-tag :type="scope.row.status === '启用' ? 'success' : 'danger'">
            {{ scope.row.status }}
          </el-tag>
        </template>
      </el-table-column>
      <el-table-column prop="regDate" label="注册日期" width="150" />
      
      <el-table-column label="操作" width="180" align="center">
        <template #default="scope">
          <el-button 
            type="primary" 
            size="small" 
            icon="Edit"
            @click="editUser(scope.row)"
          ></el-button>
          <el-button 
            type="danger" 
            size="small" 
            icon="Delete"
            @click="deleteUser(scope.row)"
          ></el-button>
        </template>
      </el-table-column>
    </el-table>
    
    <div class="pagination">
      <el-pagination
        v-model:current-page="currentPage"
        :page-size="pageSize"
        :total="total"
        layout="prev, pager, next, jumper, sizes, total"
        background
      />
    </div>
  </div>
</template>

<script>
import { ref } from 'vue'

export default {
  setup() {
    const searchQuery = ref('')
    const currentPage = ref(1)
    const pageSize = ref(10)
    const total = ref(100)
    
    const users = ref([
      { id: 1, name: '张三', role: '医生', phone: '13800138000', hospital: '市中心医院', status: '启用', regDate: '2023-06-01' },
      { id: 2, name: '李四', role: '管理员', phone: '13900139000', hospital: '总医院', status: '启用', regDate: '2023-05-15' },
      { id: 3, name: '王五', role: '患者', phone: '13700137000', hospital: '-', status: '启用', regDate: '2023-07-10' },
      { id: 4, name: '赵六', role: '医生', phone: '13600136000', hospital: '人民医院', status: '禁用', regDate: '2023-06-20' }
    ])
    
    const getRoleTagType = (role) => {
      switch(role) {
        case '医生': return 'success'
        case '管理员': return 'warning'
        case '患者': return 'info'
        default: return ''
      }
    }
    
    const editUser = (user) => console.log('编辑用户:', user)
    const deleteUser = (user) => console.log('删除用户:', user)
    
    return {
      searchQuery,
      currentPage,
      pageSize,
      total,
      users,
      getRoleTagType,
      editUser,
      deleteUser
    }
  }
}
</script>

<style scoped>
.admin-users {
  padding: 20px;
}

.dashboard-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
}

.header-actions {
  display: flex;
  gap: 10px;
}

.search-input {
  width: 300px;
}

.pagination {
  margin-top: 20px;
  display: flex;
  justify-content: flex-end;
}
</style>